<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-p-20">
			<view class="cu-w-100 cu-p-20 cu-bg-main cu-shadow cu-border-r-20" style="margin-bottom: 200rpx;">
				<view class="cu-w-100">
					<checkbox-group @change="checkboxChange">
						<label class="cu-w-100 " v-for="(item,index) in list" :key="index">
							<view class="cu-w-100 cu-d-flex cu-py-20" :style="{
								borderBottom: index !== (list.length - 1) ? '1px solid #ccc' : ''
							}">
								<view class="cu-pr-20">
									<checkbox :value="index" />
								</view>
								<view>{{item.text}}</view>
							</view>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="cu-position-fixed cu-px-40 cu-pt-20 cu-pb-20 cu-bottom-0 cu-w-100 cu-bg-main"
			style="height: 120rpx;">
			<view class="cu-w-100 cu-row cu-j-center">
				<view @click="auditionFun"><u-button text="试听" shape="circle" :customStyle="{width: '240rpx'}"
						color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button></view>
			</view>
		</view>
		<uni-popup ref="auditionPopup" type="center" style="width: 200px;" background-color="#f8f8f8">
			<view class="cu-w-100 cu-p-20">
				<view class="cu-w-100 cu-pt-20 cu-d-flex cu-flex-column cu-j-sb cu-a-stretch">
					<view class="cu-w-100 cu-text-center">
						<view class="cu-w-100">
							<audio class="cu-w-100" style="text-align: left" poster="/static/images/music-a.png"
								:src="audioUrl" name="试听" author="暂无" :action="audioAction" controls></audio>
						</view>
					</view>
					<view class="cu-w-100 cu-text-center cu-py-20" style="height: 60rpx;line-height: 60rpx;">
						<text>提示：请点击播放进行试听</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	const {
		chunkingText
	} = require("@/pages/voice/utils/voice/index")
	const {
		apiPostAudition
	} = require('@/pages/voice/utils/api/index')
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				loginStore: state => state.loginStore,
				voiceStore: state => state.voiceStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "试听",
					leftText: "返回",
					leftIcon: "back",
				},
				list: [],
				selectValue: [],
				audioAction: {
					method: 'pause'
				},
				audioUrl: undefined
			};
		},
		onLoad() {
			this.list = chunkingText(this.voiceStore.text)
		},
		methods: {
			checkboxChange(e) {
				const {
					value
				} = e.detail
				this.selectValue = value
			},
			/* 试听 */
			async auditionFun() {
				if (this.audioUrl !== undefined) {
					const that = this
					uni.showModal({
						title: '提示',
						content: "是否试听上次结果？",
						cancelText: '重新合成',
						confirmText: '是',
						success: async function(res) {
							const {
								cancel,
								confirm
							} = res
							// 确认
							if (confirm === true) {
								that.$refs.auditionPopup.open()
							} else if (cancel === true) {
								that.audition()
							}
						}
					});

				}
				else {
					this.audition()
				}

			},
			/* 试听 */
			async audition() {
				if (this.selectValue.length === 0) {
					uni.showToast({
						icon: "error",
						title: "请选择试听内容"
					})
					return
				}

				//// 构造参数
				// 试听文本
				let text = "";
				let realText = ""
				for (let index of this.selectValue) {
					text += this.list[index].text
					realText += this.list[index].realText
				}

				// 判断文本内容是否超长
				if (realText.length > 151) {
					uni.showToast({
						icon: "error",
						title: "试听内容过多"
					})
					return
				}
				else if (realText.length == 0) {
					uni.showToast({
						icon: "error",
						title: "未获取到试听内容"
					})
					return
				}

				const that = this
				const uid = this.loginStore.userinfo._id

				uni.showModal({
					title: '提示',
					content: '当前合成消耗' + (text.length - 1) + "个字符，是否试听",
					cancelText: '取消',
					confirmText: '确认',
					success: async function(res) {
						const {
							cancel,
							confirm
						} = res
						// 确认
						if (confirm === true) {
							// 试听
							await apiPostAudition(uid, text, that.voiceStore)
								.then(async apiRes => {
									const {
										text,
										tempFilePath,
										SessionId,
										Subtitles
									} = apiRes
									that.audioUrl = tempFilePath
									await that.$store.dispatch(
										'voiceStore/addAuditionRecord', {
											uid,
											that,
											text,
											SessionId,
											Subtitles
										});
									uni.hideLoading();
									that.$refs.auditionPopup.open()
								}).catch(res => {
									uni.hideLoading();
									uni.showModal({
										title: '提示',
										content: '合成失败，请稍后重试',
										confirmText: '确认',
										showCancel: false,
									});
								})
						}
					}
				});

			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">

</style>